<template>
  <div class="header_container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <router-link :to="breadcrumb.path">{{ breadcrumb.name }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown>
      <el-avatar :size="30" class="avator"
                 src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="home">首页</el-dropdown-item>
          <el-dropdown-item command="modifyPassword" @click="openModifyPassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="signout" @click="signout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <el-dialog title="修改密码" v-model="showModifyPassword" width="30%">
    <el-form :model="modifyPasswordForm" :rules="modifyPasswordRules" ref="modifyPasswordFormRef" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="modifyPasswordForm.oldPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="modifyPasswordForm.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="modifyPasswordForm.confirmPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modifyPassword">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {computed, ref, getCurrentInstance} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import Url from "@/consts/Url";
import {ElMessage} from 'element-plus';
import EncryptUtils from "@/utils/EncryptUtils";
import UserToken from "@/user/UserToken";

const route = useRoute();
const router = useRouter();
const {proxy} = getCurrentInstance();

const breadcrumbs = computed(() => {
  const paths = route.path.split('/').filter(path => path);
  const breadcrumbArray = [];
  let currentPath = '';

  paths.forEach((path, index) => {
    currentPath += `/${path}`;
    const route = router.getRoutes().find(r => r.path === currentPath);
    if (route) {
      breadcrumbArray.push({
        path: currentPath,
        name: route.name || 'Unnamed'
      });
    }
  });

  return breadcrumbArray;
});

// 修改密码
const showModifyPassword = ref(false);
const openModifyPassword = () => {
  showModifyPassword.value = true;
};
const modifyPasswordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const modifyPasswordRules = {
  oldPassword: [
    {required: true, message: '请输入旧密码', trigger: 'blur'}
  ],
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请输入确认密码', trigger: 'blur'}
  ]
}
const modifyPasswordFormRef = ref(null);

const modifyPassword = async () => {
  const isValid = await new Promise((resolve) => {
    modifyPasswordFormRef.value.validate(valid => {
      resolve(valid);
    });
  });

  if (!isValid) {
    return false;
  }


  if (isValid) {
    const passwordCodeResponse = await proxy.$request.get(Url.MODIFY_PASSWORD.MODIFY_PASSWORD_CODE.value, {});
    console.log("response: "+JSON.stringify(passwordCodeResponse));
    if (passwordCodeResponse.code === 0) {
      let params={
        oldPassword: EncryptUtils.encrypt(modifyPasswordForm.value.oldPassword, passwordCodeResponse.data),
        newPassword: EncryptUtils.encrypt(modifyPasswordForm.value.newPassword, passwordCodeResponse.data),
      }
      const passwordResponse = await proxy.$request.get(Url.MODIFY_PASSWORD.MODIFY_PASSWORD.value, params);
      console.log("response: "+JSON.stringify(passwordResponse));
      if (passwordResponse.code === 0) {
        ElMessage.success("修改密码成功");
        showModifyPassword.value = false;
      }else {
        ElMessage.error(passwordResponse.message);
      }
      modifyPasswordFormRef.value.resetFields();
    }
  }

};

const signout = () => {
  UserToken.clear();
  router.push('/login');
}

</script>

<style scoped>

.header_container {
  background-color: #EFF2F7;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.avator {
  border-radius: 50%;
  margin-right: 37px;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>